<template>
  <el-container style="height: 100vh;color: var(--deepText)">
    <!--左边栏-->
    <LeftAside/>
    <!--右侧内容-->
    <el-container style="background-color: var(--deepBg)">
      <!--上边栏-->
      <Header/>
      <!--路由内容-->
      <transition name="scale" mode="out-in" appear>
        <router-view style="padding: 80px 20px 20px 20px;width: 100%" :key="$route.fullPath"/>
      </transition>
    </el-container>
    <!--菜单栏-->
    <Menu/>
  </el-container>
</template>

<script>
import LeftAside from "@/components/LeftAside";
import Header from "@/components/Header";
import Menu from "@/components/Menu";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Container",
  components: {Menu, Header, LeftAside}
}
</script>

<style scoped>
.scale-enter-active {
  transition: all 0.2s ease;
  opacity: 0;
  transform: scale(0.95);
}

.scale-leave-active {
  transition: all 0.3s ease;
  opacity: 0;
  transform: scale(0.95);
}


</style>